<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-20 16:47:29
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 18:12:28
-->
<template>
  <div class="workorder">
    <van-nav-bar
      title="完成工单"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-cell-group>
      <van-field v-model="order.type" label="工单类型" readonly />
      <van-field v-model="order.status" label="工单状态" readonly />
      <van-field v-model="order.engineer_name" label="项目名称" readonly />
      <van-field v-model="order.device_name" label="设备名称" readonly />
      <van-field v-model="order.bill_why" label="申报原因" readonly />
      <van-field
        name="image"
        label="申报图片"
        :value="order.begin_photos.length == 0 ? '暂无数据' : ''"
        readonly
      />
      <div>
        <img
          v-for="(item, index) in order.begin_photos"
          :key="index"
          width="150px"
          :src="item"
          alt="暂无图片"
        />
      </div>
    </van-cell-group>
    <!-- 图片上传 -->
    <div>
      <van-field name="image" label="处理现场" readonly />
    </div>
    <div style="margin-bottom: 2em">
      <van-uploader
        multiple
        :fileList="imgList"
        :max-count="3"
        result-type="file"
        :after-read="afterRead"
      />
    </div>

    <van-button type="primary" block @click="submitHandler"
      >完成工单</van-button
    >
  </div>
</template>
<script>
import { get } from "../../utils/request";
import axios from "axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      order: {},
      imgList: [],
    };
  },
  methods: {
    submitHandler() {
      let imgList = this.imgList;
      if (imgList.length < 3) {
        Toast.fail("必须上传3张图片");
        return false;
      }
      let url = "/workorder/finishOrder";
      let params = {
        id: this.order.id,
        photo1: imgList[0].url,
        photo2: imgList[1].url,
        photo3: imgList[2].url,
        finish_time: new Date().getTime(),
      };
      get(url, params).then((resp) => {
        Toast.success(resp.message);
        this.$router.go(-1);
      });
    },
    // 上传图片
    afterRead(file) {
      console.log(file);
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          file.status = "success";
          let url = "http://121.199.29.84:8888/group1/" + response.data.data.id;
          this.imgList.push({ url });
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
  },
  mounted() {
    this.order = this.$route.query;
  },
};
</script>
<style scoped>
.workorder {
  font-size: 12px;
  color: #666;
  padding-bottom: 50px;
  background-color: #f4f4f4;
}
</style>
<style >
.van-uploader__wrapper {
  width: 100%;
}

.van-uploader__wrapper > div {
  flex: 1;
}

.van-uploader__wrapper > div .van-uploader__preview-image {
  width: 100%;
}
</style>